<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://sc2.blizzard.cn/css/features.min.css"/>
    <link rel="stylesheet" href="https://sc2.blizzard.cn/style/css/landing_201804.css"/>
    <link rel="stylesheet" href=""/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!--    <script src="js/flat-ui.min.js"></script>-->
</head>
<body>





<!--topstarts-->`
<div class="m-header">
    <a href="/home" class="logo"><img src="IMG/R-C(2).png"></a>
    <ul class="nav f-cb">
        <li class="home">
            <a href="/home">进入官网</a>
        </li>
        <li class="reg">
            <a href="javascript:;" data-reg="">注册账号</a>
        </li>
        <li class="download">
            <a href="/download">大图书馆</a>
        </li>
        <li class="free">
            <a href="/xs">管理员模式</a>
        </li>
    </ul>
</div>
<!--topends-->
<br><br><br><br><br><br><br><br>







<!--<div class="container" style="margin-top: 7rem">-->
<!--    <div class="input-group">-->
<!--        <input class="form-control" id="search_input" type="search" placeholder="Search" name="search">-->
<!--        <span class="input-group-btn">-->
<!--      <button type="button" class="btn" id="search_btn"><span class="fui-search"></span></button>-->
<!--    </span>-->
<!--    </div>-->
<!--    <div id="search_res" class="row" style="margin-top: 1.2rem"></div>-->
<!--</div>-->
</body>


<script type="text/javascript">
    $(document).ready(function(){
        $('#search_input').bind('keypress',function(event){//监听回车事件
            if(event.keyCode == "13")
            {
                $("#search_btn").click();
            }
        });

        $('#search_btn').click(function(){
            url = "./search-servlet?search=" + document.getElementById("search_input").value;  // 获取查询内容拼接url
            $.getJSON(url,function(result){   // 调用jquery的getJSON方法Ajax请求资源
                var res=eval(result.res);   // 获取"res"字段的值
                delete result["res"]; // 从JSON删除"res"字段
                if(res > 0){
                    $("#search_res").html("");
                    $.each(result, function(i, field){
                        // 遍历剩余JSON对象，取出每个对象中的bookid、picpath、bookname的值，并放入对应div
                        var title = field["title"];
                        var content = field["content"];
                        var authorname = field["author"];
                        $("#search_res").append("<div class=\"col-sm-4 col-md-3\">" +
                            "<div class=\"thumbnail\" >" +
                            "<a href="+title+"\"admin/postingInfo.jsp?title=\">" +
                            "<img alt=\"100%x200\" src=\""+content+"\" data-src=\"holder.js/100%x200\" data-holder-rendered=\"false\">" +
                            "</a>" +
                            "<div class=\"caption center\">" +
                            "<h3>"+authorname+"</h3>" +
                            "<p><a class=\"btn btn-primary btn-block\" role=\"button\" href="+title+"\"admin/postingInfo.jsp?title=\">查看详情</a></p>" +
                            "</div>" +
                            "</div>" +
                            "</div>");
                    });
                }else if(res == 0){
                    $("#search_res").html("<a class=\"btn btn-primary btn-block\">查询无结果</a>");

                }else{
                    $("#search_res").html("<a class=\"btn btn-primary btn-block\">请输入查询内容</a>");
                }
            });
            return false;
        });
    });
</script>
</html>
